---
type: tutorial
title: Crie sua primeira página Astro
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Adicione novas páginas para o seu site com links de navegação entre elas
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Agora que você sabe que arquivos `.astro` são responsáveis pelas páginas no seu website, é hora de criar uma!

<PreCheck>
  - Criar duas novas páginas no seu website: Sobre e Blog
  - Adicionar links de navegação em suas páginas
  - Fazer deploy de uma versão atualizada do seu website para a web
</PreCheck>

## Crie um novo arquivo `.astro`

<Steps>
1. No painel de arquivos do seu editor de código, navegue até a pasta `src/pages/` onde você verá o arquivo `index.astro` existente

2. Na mesma pasta, crie um novo arquivo chamado `about.astro`.

3. Copie, ou digite novamente os conteúdos de `index.astro` no seu novo arquivo `about.astro`.

    :::tip
    Seu editor pode mostrar um círculo branco sólido no rótulo da aba para esse arquivo. Isso significa que o arquivo ainda não foi salvo. Dentro do menu Arquivo no VS Code, habilite "Salvamento Automático" e você não deve mais precisar salvar quaisquer arquivos manualmente.
    :::

4. Adicione `/about` ao final da URL de pré-visualização do seu website na barra de endereço e verifique que você consegue ver uma página carregando lá. (e.x. `http://localhost:4321/about`)
</Steps>

Agora, sua página "about" deve se parecer exatamente com a primeira página, mas nós iremos mudar isso!

## Edite sua página

Edite o conteúdo HTML para fazer a página ser sobre você.

Para modificar ou adicionar mais conteúdo em sua página Sobre, adicione mais tags de elementos HTML contendo conteúdo. Você pode copiar e colar o código HTML abaixo entre as tags `<body></body>` existentes, ou criar seu próprio.

```astro title="src/pages/about.astro" ins={3-8} del={2}
<body>
  <h1>Meu Site Astro</h1>
  <h1>Sobre Mim</h1>
  <h2>... e meu novo site Astro!</h2>

  <p>Estou resolvendo o tutorial introdutório do Astro. Esta é a segunda página no meu website, e é a primeira que eu mesmo construí!</p>

  <p>Este site será atualizado enquanto eu completo mais desse tutorial, então continue verificando e veja como minha jornada está indo!</p>
</body>
```

Agora, visite sua página `/about` na aba do seu navegador novamente, e você deve ver seu conteúdo atualizado.

## Adicione links de navegação

Para ser mais fácil de pré-visualizar todas as suas páginas, adicione links de navegação de página HTML antes do seu `<h1>` no topo de ambas as suas páginas (`index.astro` e `about.astro`):

```astro title="src/pages/about.astro" ins={1-2}
<a href="/">Início</a>
<a href="/about/">Sobre</a>

<h1>Sobre Mim</h1>
<h2>... e meu novo site Astro!</h2>
```

Verifique que você pode clicar nesses links para ir e voltar entre as páginas no seu site.

:::note
Diferente de vários frameworks, Astro utiliza elementos `<a>` padrões do HTML para navegar entre páginas (também chamadas rotas), com recarregamento tradicional de página.
:::

<Box icon="puzzle-piece">
## Tente você mesmo - Adicione uma página Blog

Adicione uma terceira página `blog.astro` ao seu site, seguindo as mesmas [etapas como acima](#crie-um-novo-arquivo-astro).

(Não esqueça de adicionar um terceiro link de navegação para cada página.)

<details>
<summary>Me mostre as etapas.</summary>
<Steps>
1. Crie um novo arquivo em `src/pages/blog.astro`.
2. Copie os conteúdos de `index.astro` e os cole em `blog.astro`.
3. [Adicione um terceiro link de navegação](#adicione-links-de-navegação) ao topo de cada página:
</Steps>

```astro title="src/pages/index.astro" ins={4}
<body>
  <a href="/">Início</a>
  <a href="/about/">Sobre</a>
  <a href="/blog/">Blog</a>

  <h1>Meu Site Astro</h1>
</body>
```
</details>
</Box>

Você agora deve ter um website com três páginas que tem links de uma para a outra. Hora de adicionar algum conteúdo na página Blog.

Atualize o conteúdo da página em `blog.astro` com:
```astro astro title="src/pages/blog.astro" ins={7-8} del={6}
<body>
  <a href="/">Início</a>
  <a href="/about/">Sobre</a>
  <a href="/blog/">Blog</a>

  <h1>Meu Site Astro</h1>
  <h1>Meu Blog de Aprendizado sobre Astro</h1>
  <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
</body>
```

Pré-visualize seu site inteiro visitando todas as três páginas na pré-visualização do seu navegador e verifique que:
- Toda página faz links corretos para todas as três páginas
- Suas duas novas páginas tem seu próprio cabeçalho descritivo 
- Suas duas novas páginas tem seu próprio texto de parágrafo

## Publique suas mudanças para a web
Se você seguiu nossa configuração na Unidade 1, você pode publicar suas mudanças para o seu website ao vivo através da Netlify.

Quando estiver feliz em como sua pré-visualização aparece, faça **commit** de suas mudanças para seu repositório online no GitHub.

<Steps>
1. No VS Code, pré-visualize os arquivos que foram mudados desde o seu último commit ao GitHub. 

    - Vá para a **aba Controle de Código-Fonte** no menu à esquerda. Ela deve ter um pequeno "3" amostra.

    - Você deve ver `index.astro`, `about.astro` e `blog.astro` listados como arquivos que foram modificados.

2. Insira uma mensagem de commit (e.x. "Adicionei duas novas páginas - sobre e blog") na caixa de texto, e pressione <kbd>Ctrl + Enter</kbd> (macOS: <kbd>Cmd ⌘ + Enter</kbd>) para fazer commit da mudança para sua área de trabalho atual.

3. Clique no botão para <kbd>Sincronizar Mudanças</kbd> ao GitHub.

4. Após esperar alguns minutos, visite sua URL da Netlify para verificar que suas mudanças foram publicadas ao vivo.
</Steps>

:::tip[Faça commit e deploy regularmente]
Siga essas etapas toda vez que você pausar o trabalho! Suas mudanças serão atualizadas no seu repositório no GitHub. Se você fez deploy para um website Netlify, ele terá a build feita novamente e republicado.
:::



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Eu posso criar uma nova página para meu website e fazer um link para ela de uma página existente.
- [ ] Eu posso fazer commit de minhas mudanças para o GitHub e atualizar meu site ao vivo na Netlify.
</Checklist>
</Box>

### Recursos

- [Roteamento baseado em arquivos no Astro](/pt-br/basics/astro-pages/#roteamento-baseado-em-arquivos)

- [HTML de páginas Astro](/pt-br/basics/astro-pages/#páginas-astro)
